<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<style>
    caption{
        font-size: 70px;
    }

</style>
<body>
    <form method="get" id="form" style="margin-left: 200px">
        讨论板块：<select id="Category" name="sortId">
            <option value="">全部</option>
        </select>
        <input type="button" value="查询" id="query_btn">
    </form>
    <table border="1" align="center" width="70%">

        <thead >
        <tr>
            <td>帖子ID</td>
            <td>标题</td>
            <td>作者</td>
            <td>发布时间</td>
            <td>回复次数</td>
        </tr>
        </thead>
        <tbody>

        </tbody>

    </table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {

        bbsList();
        function bbsList(){
            $.get("/getBbsListBySortId.do",$("#form").serialize(),function (data) {
                for (var i=0;i<data.length;i++){
                    var bbs=data[i];
                    var str="<tr>"+
                        "<td>"+bbs.id+"</td>"+
                        "<td>"+bbs.title+"</td>"+
                        "<td>"+bbs.author+"</td>"+
                        "<td>"+bbs.createDate+"</td>"+
                        "<td>"+bbs.replyCount+"</td>"+
                        "</tr>"
                    $("tbody").append(str);
                }
            },"json");
        }

        $.get("/getBbsSortList.do",function (data) {
            for (var i=0;i<data.length;i++){
                var bbsSort=data[i];
                var str="<option value='"+bbsSort.id+"'>"+bbsSort.name+
                    "</option>"
                $("#Category").append(str);
            }
        },"json");


        $("#query_btn").click(function () {
            $("tbody").empty();
            bbsList();
        });
    });
</script>
</html>